<template>
  <div class="container">
    <header class="header"> </header>
    <div class="header-tabs">
      <var-tabs
        elevation
        item-direction="vertical"
        color="var(--color-primary)"
        active-color="var(--color-on-primary)"
        inactive-color="var(--color-on-info)"
        class="tabs"
        v-model:active="active"
        @change="tabsChange"
      >
        <var-tab name="rustic">
          <img class="tabs-example-icon" src="@/assets/icons/rustic.svg" alt="" />
          <div>乡村</div>
        </var-tab>
        <var-tab name="attractions">
          <img class="tabs-example-icon" src="@/assets/icons/attractions.svg" alt="" />
          <div>景点</div>
        </var-tab>
        <var-tab name="food">
          <img class="tabs-example-icon" src="@/assets/icons/food.svg" alt="" />
          <div>美食</div>
        </var-tab>
      </var-tabs>
    </div>
    <div class="intro-header">
      <var-input placeholder="搜索内容" clearable v-model="query" enterkeyhint="done" @blur="search" @change="search">
        <template #append-icon>
          <var-icon class="append-icon" name="magnify" />
        </template>
      </var-input>
    </div>
    <var-tabs-items v-model:active="active">
      <var-tab-item name="rustic">
        <div class="btn-wrap">
          <var-list finished-text="没有更多了" error-text="出错了出错了" :finished="finished" v-model:loading="loading" @load="load">
            <var-cell :key="item.id" v-for="item in rusticList">
              <var-card
                :title="item.name"
                :subtitle="'简介: ' + item.briefIntro"
                :description="item.address"
                :src="getFileHttpUrl(item.cover)"
                layout="column"
                @click="rusticClick(item.id)"
              >
                <template #extra>
                  <var-button text round>
                    <var-icon name="star" />
                    <td>{{ item.collectionCount }}</td>
                  </var-button>
                  <var-button round text>
                    <var-icon name="heart" />
                    <td>{{ item.likeCount }}</td>
                  </var-button>
                </template>
              </var-card>
            </var-cell>
          </var-list>
        </div>
      </var-tab-item>
      <var-tab-item name="attractions">
        <div class="btn-wrap">
          <var-list finished-text="没有更多了" error-text="出错了出错了" :finished="finished" v-model:loading="loading" @load="load">
            <var-cell :key="item.id" v-for="item in rusticList">
              <var-card
                :title="item.name"
                :subtitle="'乡村: ' + item.rusticName"
                :description="(item.feature ? '景点特色: ' + item.feature + '\n' : '') + '' + '地址: ' + item.address"
                :src="getFileHttpUrl(item.cover)"
                layout="column"
                @click="attractionsClick(item.id)"
              >
                <template #extra>
                  <var-button text round>
                    <var-icon name="star" />
                    <td>{{ item.collectionCount }}</td>
                  </var-button>
                  <var-button round text>
                    <var-icon name="heart" />
                    <td>{{ item.likeCount }}</td>
                  </var-button>
                </template>
              </var-card>
            </var-cell>
          </var-list>
        </div>
      </var-tab-item>
      <var-tab-item name="food">
        <div class="btn-wrap">
          <var-list finished-text="没有更多了" error-text="出错了出错了" :finished="finished" v-model:loading="loading" @load="load">
            <var-cell :key="item.id" v-for="item in rusticList">
              <var-card
                :title="item.name"
                :subtitle="'乡村: ' + item.rusticName"
                :description="item.address"
                :src="getFileHttpUrl(item.cover)"
                layout="column"
                @click="foodClick(item.id)"
              >
                <template #extra>
                  <var-button text round>
                    <var-icon name="star" />
                    <td>{{ item.collectionCount }}</td>
                  </var-button>
                  <var-button round text>
                    <var-icon name="heart" />
                    <td>{{ item.likeCount }}</td>
                  </var-button>
                </template>
              </var-card>
            </var-cell>
          </var-list>
        </div>
      </var-tab-item>
    </var-tabs-items>
    {{ getUserInfo }}
  </div>
</template>

<script lang="ts" setup name="HomePage">
  import { computed } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  // import { setLang } from '@/i18n';
  // import { useI18n } from 'vue-i18n';
  import { getRusticList } from '@/api/rustic';
  import { getFileHttpUrl } from '@/utils/urlUtils';
  import { getAttractionsList } from '@/api/attractions';
  import { getFoodList } from '@/api/food';
  import { getTravelPlanList } from '@/api/travelPlan';
  import type { Response } from '@/utils/request/request';
  import { formatToDateTime } from '@/utils/dateUtil';
  import type { Dayjs } from 'dayjs';

  // const { locale } = useI18n();
  const router = useRouter();
  const active = ref('rustic');
  const query = ref('');
  const list = ref([]);
  let current = 1;
  const loading = ref(false);
  const valueFormat = 'YYYY-MM-DD HH:mm';

  // let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'postcss-px-to-viewport', 'varlet / vant / nutUI', 'eruda'];
  const userStore = useUserStore();
  const getUserInfo = computed(() => {
    const { name = '' } = userStore.getUserInfo || {};
    return name;
  });

  // const { list, page, setParams, loading } = useRequestList({
  //   apiKey: rusticApi.rusticList,
  //   type: RequestEnum.GET,
  // });
  //
  // const onSearchData = (searchParams: any) => {
  //   setParams({
  //     ...searchParams,
  //     name: query,
  //   });
  // };

  const finished = ref(false);
  const rusticList = ref<
    {
      id: number;
      name: string;
      briefIntro: string;
      address: string;
      detailedAddress: string;
      cover: string;
      publishTime: Dayjs;
      updateTime: string;
      createTime: string;
      likeCount: number;
      collectionCount: number;
      browseCount: number;
      collection: boolean;
      like: boolean;
      rusticName: string;

      feature: string;
      creator: string;
    }[]
  >([]);

  const getList = async () => {
    console.info('列表当前选中的模块===>', active.value);
    let res: Response;
    if (active.value === 'rustic') {
      res = await getRusticList({ name: query.value, current: current, size: 10 });
    } else if (active.value === 'attractions') {
      res = await getAttractionsList({ rusticId: undefined, name: query.value, current: current, size: 10 });
    } else if (active.value === 'food') {
      res = await getFoodList({ rusticId: undefined, name: query.value, current: current, size: 10 });
    } else {
      res = await getTravelPlanList({ rusticId: undefined, name: query.value, current: current, size: 10 });
    }

    if (res) {
      current = res.data.current + 1;
      if (res.data.total == 0) {
        finished.value = true;
        return;
      }
      setListData(res.data.current > 1 ? [...list.value, ...res.data.records] : (res.data.records as any[]));
      rusticList.value = list.value.map(
        (item: {
          id: number;
          name: string;
          briefIntro: string;
          address: string;
          detailedAddress: string;
          cover: string;
          publishTime: Dayjs;
          updateTime: string;
          createTime: string;
          likeCount: number;
          collectionCount: number;
          browseCount: number;
          collection: boolean;
          like: boolean;
          rusticName: string;
          feature: string;
          creator: string;
        }) => ({
          id: item.id,
          name: item.name,
          briefIntro: item.briefIntro,
          address: item.address,
          detailedAddress: item.detailedAddress,
          cover: item.cover,
          publishTime: item.publishTime,
          updateTime: item.updateTime,
          createTime: item.createTime,
          likeCount: item.likeCount,
          collectionCount: item.collectionCount,
          browseCount: item.browseCount,
          collection: item.collection,
          like: item.like,
          rusticName: item.rusticName,
          feature: item.feature,
          creator: item.creator,
          // likeCount: 1232,
          // collectionCount: 253,
        }),
      );
      // 将映射后的新数据追加到 rusticList 中
      // rusticList.value.push(...rusticListTemp.value);
      if (rusticList.value.length == 0) {
        finished.value = true;
      }
      return res.data.record;
    }
  };
  const setListData = (data: any) => {
    list.value = data;
  };
  const load = () => {
    setTimeout(() => {
      getList();
      loading.value = false;
    }, 1000);
  };

  /**
   * 查询的时候清空原来的数据
   */
  const search = () => {
    loading.value = true;
    list.value = [];
    current = 1;
    load();
    // 若是没有数据则清空原来的数据
    if (list.value.length == 0) {
      rusticList.value = [];
    }
    // console.info('失焦后数据 ===> ', list);
  };

  /**
   * 变化tabs时候清空原来的数据
   */
  const tabsChange = () => {
    rusticList.value = [];
    loading.value = true;
    current = 1;
    load();
  };

  /**
   * 乡村卡片点击跳转页面
   */
  const rusticClick = (id: number) => {
    router.push({ path: '/rustic', query: { id: id } });
  };

  const attractionsClick = (id: number) => {
    router.push({ path: '/attractions', query: { id: id } });
  };

  const foodClick = (id: number) => {
    router.push({ path: '/food', query: { id: id } });
  };

  // const changeLang = (type) => {
  //   setLang(type);
  // };

  onMounted(() => {});
</script>
<style lang="scss">
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 40px;

    img {
      width: 90px;
      height: 90px;
    }
  }

  .intro-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 16px;
    width: 100%;
  }

  .supportList {
    margin: 0 16px;

    .nut-cell-group__title {
      margin-top: 30px;
    }
  }

  .btn-wrap {
    margin: 20px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .btn-confirm {
    @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
  }

  .tabs-example-icon {
    margin-bottom: 5px;
    width: 55px;
    height: 55px;
  }
  .tabs {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding:
      -5,
      -5;
    margin: 0;
    --color-primary: #f0f0f0;
    --color-on-primary: #4b7a74;
    --color-on-info: #000303;
    box-sizing: border-box;
  }
</style>
